<!DOCTYPE html>
<html lang="en">
	<head>
		<base href="${basePath}">
		<link type="text/css" rel="stylesheet" href="${basePath}plugins/zTree/3.5.1/zTreeStyle/zTreeStyle.css"/>
		<script type="text/javascript" src="${basePath}static/js/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="${basePath}plugins/zTree/3.5.1/jquery.ztree.core.js"></script>
		<script type="text/javascript" src="${basePath}plugins/zTree/3.5.1/jquery.ztree.excheck.js"></script>
    </head>
<body>
	<div  id="ztree" class="layui-elem-field" style="height: 300px;">
		<ul id="tree" class="ztree"></ul>
	</div>
	<!--<input type="text" id="parentId" name="parentId">-->
	<!--<input type="text" id="parentName" name="parentName">-->
	<script type="text/javascript">
		var zTree;
		$(document).ready(function(){
			var zn = '${zTreeNodes}';
				zn=zn.replace(/&quot;/g,'"');//转换后台返回的&quot;
			var setting = {
//				check: {
//					enable: true,
//					chkStyle: "checkbox",
//					chkboxType: { "Y" : "", "N" : "" }
//				},
				data: {
					key: {
						title: "dept"
					},
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pId",
						rootPId: 0
					}
				},
				callback:{
					onCheck: zTreeOnClick
				}
			};
			var zNodes = eval(zn);
			zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
		});

		var ids = new Array();
        var names = new Array();
		function zTreeOnClick(event, treeId, treeNode) {
			var  aa=    treeNode.checked;
			var id=treeNode.id;
			var name = 	treeNode.name;
			if(aa){
				if(ids.indexOf(id)< 0 ){
            		ids.push(id);
            		names.push(name);
           			// alert(ids.join(",")+"---"+names.join(","));
		   			// alert(treeNode.tId +treeNode.name);
				}
			}else{
				var index = $.inArray(id,ids);
				if(index>=0) {
					ids.splice(index, 1);
				}
				var index = $.inArray(name,names);
				if(index>=0) {
					names.splice(index, 1);
				}
			}
			$("#parentId").val(ids.join(","));
			$("#parentName").val(names.join(","));
		}


	</script>
</body>
</html>